<template>
  <el-row class="test-bg">
    <el-col :span="6">
      <h1>待完成</h1>
      <div>
        <div v-for="(item,index) in toBeDoneTaskList" :key="item.name">
          <el-dropdown @command="handleClick">
            <span class="el-dropdown-link">
              {{ index + 1 }}、{{ item.name
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus" :command="beforeCommand('start',index,toBeDoneTaskList)">
                  开始</el-dropdown-item>
                <el-dropdown-item :icon="CirclePlusFilled"
                  :command="beforeCommand('finished',index,toBeDoneTaskList)">
                  完成
                </el-dropdown-item>
                <el-dropdown-item :icon="CirclePlus"
                  :command="beforeCommand('obsolete',index,toBeDoneTaskList)">废弃</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <h1>进行中</h1>
      <div v-for="(item,index) in inProgressTaskList" :key="item.name">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ index + 1 }}、{{ item.name }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu @click="handleClick">
              <el-dropdown-item :icon="Plus">
                开始
              </el-dropdown-item>
              <el-dropdown-item :icon="CirclePlusFilled">
                完成
              </el-dropdown-item>
              <el-dropdown-item :icon="CirclePlus"> 废弃 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
    <el-col :span="6">
      <div></div>
      <h1 asdf="f">已完成</h1>
      <div v-for="(item,index) in finishedTaskList" :key="item.name">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ index + 1 }}、{{ item.name
            }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Plus">开始</el-dropdown-item>
              <el-dropdown-item :icon="CirclePlusFilled">完成
              </el-dropdown-item>
              <el-dropdown-item :icon="CirclePlus">废弃</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
    <el-col :span="6">
      <h1>废弃</h1>
      <div v-for="(item,index) in obsoleteTaskList" :key="item.name">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ index + 1 }}、{{ item.name}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Plus">开始</el-dropdown-item>
              <el-dropdown-item :icon="CirclePlusFilled">完成
              </el-dropdown-item>
              <el-dropdown-item :icon="CirclePlus">废弃</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import {
  ArrowDown,
  CirclePlus,
  CirclePlusFilled,
  Plus
} from '@element-plus/icons-vue';
import { ref } from 'vue';
const toBeDoneTaskList = ref([
  {
    'name': 'task1',
    'status': '0',
    'percent': 1
  },
  {
    'name': 'task2',
    'status': '0',
    'percent': 0
  }
]);
const inProgressTaskList = ref([]);
const finishedTaskList = ref([]);
const obsoleteTaskList = ref([]);
const handleClick = (params) => {
  if (params.type === 'start') {
    const tempList = params.taskList.splice(params.index,1);
    inProgressTaskList.value.push(tempList[0]);
  } else if (params.type === 'finished') {
    const tempList = params.taskList.splice(params.index,1);
    finishedTaskList.value.push(tempList[0]);
  } else {
    const tempList = params.taskList.splice(params.index,1);
    obsoleteTaskList.value.push(tempList[0]);
  }
};
const beforeCommand = (type,index,taskList) => {
  return {
    type,
    index,
    taskList
  };
};
</script>
<style lang="less">
.test-bg {
  background-color: @test-color;
}
</style>